<template>
    <div style="margin-top:20px" class="row">
        <span style="width:60px">
            颜色：
        </span>
        <ColorSelect :color="color" :mapColors="mapColors" @update:color="setColor"></ColorSelect>
    </div>
</template>

<style scoped>
.square {
    width: 20px ;
    height: 20px ;
    display: inline-block;
    margin-top: 4px;
    margin-right: 20px;
}
</style>

<script lang="ts" setup>
import { ref, onMounted, Ref, reactive, watch} from 'vue'
import { Wire } from '../../../model/conn/Wire';

const props = defineProps<{
    target:Wire
}>()

const color = ref("blue")

const mapColors: any = {
    "red":{
        value: [255,0,0] ,
        label: "红" ,
        css: "#FF0000" ,
    } ,
    "black":{
        value: [0x33,0x33,0x33] ,
        label: "黑" ,
        css: "#333333" ,
    } ,
    "blue":{
        value: [0x2D,0x8C,0xF0] ,
        label: "蓝" ,
        css: "#2D8CF0" ,
    } ,
    "green":{
        value: [0x00, 0xCC, 0x00] ,
        label: "绿" ,
        css: "#00CC00" ,
    } ,
    "yellow":{
        value: [0xFF, 0xFF, 0x00] ,
        label: "黄" ,
        css: "#FFFF00" ,
    } ,
    "orange":{
        value: [0xFF, 0x66, 0x00] ,
        label: "橙" ,
        css: "#FF6600" ,
    } ,
    "white":{
        value: [0xEE, 0xEE, 0xEE] ,
        label: "白" ,
        css: "#EEEEEE" ,
    } ,
}

function colorNameFromcss(css: string) {
    if(!css) {
        return
    }
    css = css.toUpperCase()
    for(let colorName in mapColors) {
        if(mapColors[colorName].css == css) {
            return colorName
        }
    }
    console.log("unknow color hex value", css)
}

watch(()=>props.target.figure?.color, (css)=> {
    if(!css) {
        return
    }
    let colorName = colorNameFromcss(css) 
    if(colorName) {
        color.value = colorName
    }
})

function setColor(colorName:string) {
    console.log("wire setColor", colorName)
    color.value = colorName
    if(props.target && props.target.figure) {
        props.target.figure.color = mapColors[colorName].css
    }
}


</script>